<template>
  <div id="login">
    <el-form ref="users" :model="users" class="login-box" :rules="rules">
      <h3>欢迎登录</h3>

      <el-form-item prop="name">
        <el-input prefix-icon="el-icon-user" placeholder="请输入账号……" v-model="users.name"></el-input>
      </el-form-item>

      <el-form-item prop="password">
        <el-input
          prefix-icon="el-icon-lock"
          type="password"
          placeholder="请输入密码……"
          show-password
          v-model="users.password"
        ></el-input>
      </el-form-item>

      <el-form-item prop="VerificationCode" class="vfCode clear">
        <el-input
          type="text"
          placeholder="请输入验证码……"
          v-model="users.VerificationCode"
          class="vfcode-input"
          @keyup.enter.native="login('users')"
        ></el-input>
        <el-image :src="vfcode.url" fit="cover" @click="vfCodeReq" class="vfcode-image"></el-image>
      </el-form-item>

      <el-form-item class="btn-content">
        <el-button type="primary" @click="login('users')" :disabled="!canSubmit">登录</el-button>
        <el-button type="info" plain @click="close">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Login",

  data () {
    return {
      users: {
        name: "admin",
        password: "123456",
        VerificationCode: "1234",
        delivery: false,
        roles: "管理员"
      },
      vfcode: {
        url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      },
      vrData: {
        code: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入账户", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入用户密码", trigger: "blur" },
          {
            min: 3,
            max: 16,
            message: "长度在 3 到 16 个字符",
            trigger: "blur",
          },
        ],
        VerificationCode: [
          { required: true, message: "请输入正确的验证码", trigger: "blur" },
          {
            min: 4,
            max: 4,
            message: "长度为 4",
            trigger: "blur",
          },
        ],
      },
    };
  },

  // 函数集
  methods: {
    // 登录
    login (formName) {
      // 登录之前进行规则校验,校验成功才能登录 valid: 只有当 form表单中的数据都为正确的时候才为 true
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          return;
        }

        if (this.users.VerificationCode === "1234") {
          // 下面发起 登录 请求

          /* this.$axios({
            url: "/system/login",
            method: "POST",
            data: {
              account: this.users.name,
              password: this.users.password,
              vercode: this.users.VerificationCode.toLowerCase(),
            },
          })
            .then(({ data }) => {
              // console.log(data);
              if (data.code == 200) {
                // 将 token & roles 传入 vux 保存
                this.$store.commit("loginData/LoginIn", data);
                this.$router.push("/homepage");

              } else if (data.code == "500") {
                this.$notify.error({
                  title: "错误",
                  message: data.msg,
                  type: "warning",
                });
              } else if (data.code == "501") {
                // 错误弹窗
                this.$notify.error({
                  title: "错误",
                  message: "账号或密码错误",
                  type: "warning",
                });

                // console.log("错误代码: ", data.code);
              }
            })
            .catch((err) => {
              // 错误弹窗
              this.$notify.error({
                title: "错误",
                message: "服务器运维中，稍后在试……",
                type: "warning",
              });

              console.log("登录请求失败: ", err);
            }); */
          switch (this.users.name) {
            case "admin":
              this.users.roles = "管理员";
              break;
            case "admin01":
              this.users.roles = "商户";
              break;
            case "admin02":
              this.users.roles = "代理商";
              break;
            default:
              this.users.roles = "管理员";
          }

          this.unRequest({
            data: this.users.roles,
            token: "adfhakjgamngbdsfadfka"
          })

        } else {
          // 验证码错误
          // 错误弹窗
          this.$notify.error({
            title: "错误",
            message: "验证码错误, 请重试……",
            type: "warning",
          });
        }

        // 再次获取验证
        setTimeout(() => {
          this.vfCodeReq();
        }, 1500);


        // 存账号
        this.$store.commit("quitData/checkoutState_false", this.users.name)

        console.log("this store", this.$store.state.quitData.quitState);
      });
    },

    // 重置
    close () {
      (this.users.name = ""),
        (this.users.password = ""),
        (this.users.VerificationCode = "");
    },

    unRequest (data) {
      this.$store.commit("loginData/LoginIn", data);
      this.$router.push("/homepage");
    },

    // 验证请求
    vfCodeReq () {
      this.$axios({
        url: "/system/captcha",
        method: "POST",
      })
        .then((res) => {
          // console.log("请求成功: ", res);
          this.vfcode.url = res.data.data.image;

          this.vrData.code = res.data.verCode;
        })
        .catch((err) => {
          console.log("请求失败: ", err);
        });
    },
  },

  // 计算属性
  computed: {
    canSubmit () {
      const { name, password, VerificationCode } = this.users; // 通过结构的方式，从 data 中拿取数据
      return Boolean(name && password && VerificationCode); // 通过 Boolean 转换
    },
  },

  // 数据加载完成之后
  created () {
    this.vfCodeReq();
  },
};
</script>

<style lang="scss" scoped>
.clear::before,
.clear::after {
  content: "";
  display: table;
}
.clear::after {
  clear: both;
}

#login {
  height: 100%;
  overflow: hidden;

  /* 登录框 */
  .login-box {
    width: 350px;
    height: 310px;
    border: 1px solid #dcdfe6;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #dcdfe6;
    background: #cfeeec;
    position: absolute;
    top: 0px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;

    h3 {
      width: 100%;
      text-align: center;
      font-size: 22px;
      color: #757575;
      margin-bottom: 15px;
    }

    .jumpbtn {
      width: 120px;
      margin: 5px auto;
    }
  }

  .vfCode {
    .vfcode-input {
      float: left;
      width: 47%;
      margin-top: 7px;
    }

    .vfcode-image {
      float: right;
      width: 150px;
      height: 50px;
      vertical-align: -18px;
      border-radius: 3px;
      border: 1px solid #555;
      padding: 1px;
    }
  }

  /* 登录按钮 */
  .btn-content {
    padding: 5px 20px;
    width: 450px;

    .el-button {
      width: 130px;
      margin-right: 40px;
    }
  }
}
</style>